<%@page import="org.apache.jasper.tagplugins.jstl.core.ForEach"%>
<%@ page language="java" pageEncoding="utf-8"%>
<%@page import="com.etc.entity.User"%>
<%@page import="com.etc.service.impl.UserServiceImpl"%>
<%@page import="com.etc.service.UserService"%>
<%@page import="java.util.List"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html>
<html lang="en">
<%
	if (null == request.getSession().getAttribute("user")) {
		request.getRequestDispatcher("login.jsp").forward(request, response);
	}
%>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">

<title>Dashboard Template for Bootstrap</title>
<link rel="stylesheet" href="dist/css/bootstrap.min.css">

<script src="dist/js/jquery-3.3.1.min.js"></script>

<link href="dist/css/bootstrap.min.css" rel="stylesheet">

<link href="css/dashboard.css" rel="stylesheet">


<script src="layer.js"></script>
<script src="layui.js"></script>
<link rel="stylesheet" href="css/layui.css" media="all">
<script
	src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style type="text/css">
.navbar .nav>li:hover .dropdown-menu {
	display: block;
}
</style>
</head>

<body>

	<nav class="navbar navbar-inverse navbar-fixed-top">
		<div class="container-fluid">
			<div class="navbar-header">
				<button type="button" class="navbar-toggle collapsed"
					data-toggle="collapse" data-target="#navbar" aria-expanded="false"
					aria-controls="navbar">
					<span class="sr-only">Toggle navigation</span> <span
						class="icon-bar"></span> <span class="icon-bar"></span> <span
						class="icon-bar"></span>
				</button>
				<ul class="nav navbar-nav">
					<li class="dropdown"><a class="navbar-brand" href="#">问答系统</a>
						<a style="margin-left: 100px;" href="#" class="dropdown-toggle glyphicon glyphicon-user"
						data-toggle="dropdown" role="button" aria-haspopup="true"
						aria-expanded="false">欢迎~${user.userName}~登录管理系统<span
							class="caret"></span></a>
						<ul class="dropdown-menu" style="margin-left: 100px;">
							<li><a href="#">个人信息</a></li>
							<li><a href="#">切换账号</a></li>
							<li><a href="#">退出</a></li>
						</ul></li>
				</ul>
			</div>
			<div id="navbar" class="navbar-collapse collapse">
				<ul class="nav navbar-nav navbar-right">
					<li><a id="imfor" href="#"></a></li>
					<li><a href="#">仪表盘</a></li>
					<li><a href="#">设置</a></li>
					<li><a href="LoginServlet?op=exit">退出</a></li>
					<li id="btnLo"><a id="modal-27331"
						href="#modal-container-27331" role="button" class="btn"
						data-toggle="modal">登录</a></li>
					<li id="btnExit" style="display: none;"><a
						href="${pageContext.request.contextPath}/UserServlet?op=queryPage"
						class="btn">退出</a></li>
					<li><a href="#">帮助</a></li>
				</ul>
				<form class="navbar-form navbar-right">
					<input type="text" id="searchName" class="form-control"
						placeholder="Search..." value="${nameLike==null?"":nameLike}" autofocus="autofocus"> <input type="button"
						id="btnSearch" class="form-control" value="搜索">
				</form>
			</div>
		</div>
	</nav>

	<div class="container-fluid">
		<div class="row">
			<div class="col-sm-3 col-md-2 sidebar">
				<ul class="nav nav-sidebar">
					<li><a href="index.jsp">首页 <span class="sr-only">(current)</span></a></li>
					<li><a href="qs?op=queryPage">问答信息管理</a></li>
					<li><a href="addQuestion.jsp">增加问答信息</a></li>
					<li class="active"><a href="ab?op=queryPage">回答信息管理</a></li>
				</ul>
				<ul class="nav nav-sidebar">
					<li><a
						href="${pageContext.request.contextPath}/UserServlet?op=queryPage">用户管理</a></li>
					<li><a href="addUser.jsp">新增用户</a></li>
					<li><a href="EmpServlet?op=queryPage">员工管理</a></li>
					<li><a href="">Another nav item</a></li>
					<li><a href="">More navigation</a></li>
				</ul>
				<ul class="nav nav-sidebar">
					<li><a href="">Nav item again</a></li>
					<li><a href="">One more nav</a></li>
					<li><a href="">Another nav item</a></li>
				</ul>
			</div>
			<div class="col-sm-10 col-sm-offset-3 col-md-10 col-md-offset-2 main">

				<br /> <br /> <br /> <br />
				<h2 class="sub-header">回答信息管理</h2>
				<div class="table-responsive">
				    <img alt="" src="images/face/16.gif">
					<button class="layui-btn glyphicon glyphicon-plus layui-btn-radius layui-btn-normal insert" lay-event="add">添加回答信息</button>
					<table class="layui-table">
						<colgroup>
							<col width="150">
							<col width="200">
							<col>
						</colgroup>
						<thead>
							<tr>
							    <th>编号</th>
								<th>问题</th>
								<th>回答内容</th>
								<th>回答用户</th>
								<th>回答日期</th>
								<th>操作</th>
							</tr>
						</thead>
						<tbody>
							<c:if test="${pda.data!=null}">
								<c:forEach items="${pda.data}" var="answer">
									<tr>
										<td>${answer.aid}</td>
										<td>${answer.qTitle}</td>
										<td>${answer.content}</td>
										<td>${answer.userName}</td>
										<td>${answer.adate}</td>
										<td><button onclick="delFunction(${answer.aid})"
												class="layui-btn layui-btn-sm layui-btn-danger glyphicon glyphicon-trash" lay-event="delete">删除</button>
											<button href="#modal-container-27332" data-toggle="modal"
												class="layui-btn layui-btn-sm update glyphicon glyphicon-wrench" lay-event="update">编辑</button></td>
									</tr>
								</c:forEach>
							</c:if>
						</tbody>
					</table>
					<div class="container">
						<div class="row clearfix">
							<div class="col-md-12 column">
								<div id="test1"></div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>

		<div class="modal fade mtmst" id="modal-container-27331" role="dialog"
			aria-labelledby="myModalLabel" aria-hidden="true">
			<div class="modal-dialog">
				<div class="modal-content">
					<div style="z-index: 10000;" class="modal-header">
						<button type="button" class="close" data-dismiss="modal"
							aria-hidden="true">×</button>
						<div id="loginSucess" style="display: none;">登入成功，请关闭窗口</div>
						<form id="formLogin" class="form-signin" method="post"
							onsubmit="return check()">
							<h2 class="form-signin-heading">请登录</h2>
							<div id="msg" style="display: none;">用户名或密码错误</div>
							<label for="userNameLogin" class="sr-only">用户名</label> <input
								type="text" id="userNameLogin" name="userNameLogin"
								class="form-control" placeholder="用户名" required autofocus>
							<label for="passWordLogin" class="sr-only">密码</label> <input
								type="password" id="passWordLogin" name="passWordLogin"
								class="form-control" placeholder="密码" required>
							<div class="checkbox">
								<label> <input type="checkbox" value="remember-me">
									记住我
								</label>
							</div>
							<a><button id="btnlogin"
									class="btn btn-lg btn-primary btn-block" type="button">登录</button></a>
						</form>
					</div>
				</div>

			</div>
		</div>
	</div>
	<div class="modal fade" id="modal-container-27332" role="dialog"
		aria-labelledby="myModalLabel" aria-hidden="true">
		<div class="modal-dialog">
			<div class="modal-content">
				<div style="z-index: 10000;" class="modal-header">
					<button type="button" class="close" data-dismiss="modal"
						aria-hidden="true">×</button>
					<form id="layuiForm" class="form-horizontal" role="form"
						action="${pageContext.request.contextPath}/ab?op=update"
						method="post">
						<h2 class="sub-header">请修改</h2>
						<div class="form-group" style="display: none;">
							<label for="aid" class="col-sm-2 control-label">请输入要修改的id</label>
							<div class="col-sm-8">
								<input type="text" required="required" class="form-control"
									name="aid" id="aid" />
							</div>
						</div>
						<div class="form-group">
							<label for="content" class="col-sm-2 control-label">请输入要修改的回答</label>
							<div class="col-sm-8">
								<input type="text" required="required" class="form-control"
									name="content" id="content" value="" />
							</div>
						</div>
						<div class="form-group">
							<label for="adate" class="col-sm-2 control-label">请输入要修改的时间</label>
							<div class="col-sm-8">
								<input type="text" class="layui-input" id="adate" name="adate" placeholder="请输入年月日">
							</div>
						</div>

						<div class="form-group">
							<label for="userId" class="col-sm-2 control-label">请输入要修改的回答者</label>
							<div class="col-sm-4">
								<select class="form-control" name="userId" id="userId">

								</select>
							</div>
						</div>
						<div class="form-group">
							<label for="qId" class="col-sm-2 control-label">请输入要修改的问题</label>
							<div class="col-sm-4">
								<select class="form-control" name="qId" id="qId">

								</select>
							</div>
						</div>
						
						<div class="form-group">
							<div class="col-sm-offset-5 col-sm-1">
								<button type="submit" style="width: 100px;"
									class="btn btn-danger">提交</button>
							</div>
						</div>
					</form>
				</div>
			</div>

		</div>
	</div>
	<script type="text/javascript">
		$(function() {
			//登录的点击事件
			$("#btnlogin")
					.click(
							function() {
								//ajax请求
								$.ajax({
											url : "${pageContext.request.contextPath}/UserServlet?op=login",
											type : "post",
											data : {
												"userNameLogin" : $(
														'#userNameLogin').val(),
												"passWordLogin" : $(
														'#passWordLogin').val()
											},
											success : function(data) {
												if (data == "账号或密码错误") {
													$("#msg").css("display",
															"block");
													$("#msg").css("color",
															"red");
												} else {
													$("#btnLo").css("display",
															"none");
													$("#btnExit").css(
															"display", "block");
													$("#imfor").text(
															"欢迎" + data + "登录");
													$("#imfor").css("color",
															"blue");
													$("#loginSucess").css(
															"display", "block");
													$("#formLogin").css(
															"display", "none");
												}
											}
										});
							});

		});
	</script>
	<script type="text/javascript">
		$(function() {
			//模糊查询的查询按钮的点击事件
			$("#btnSearch")
					.click(
							function() {
								//获取文本框的值
								var nameLike = $("#searchName").val();
								//页面的跳转，跳转到servlet
								location.href = "${pageContext.request.contextPath}/ab?op=queryPage&nameLike="
										+ nameLike;
							});
			//跳转到指定页数
			$("#btnToPage").click(
					function() {
						//页面的跳转，跳转到servlet
						location.href = "ab?op=queryPage&page="
								+ $("#inputPage").val() + "&nameLike="
								+ $("#searchName").val();
					});
			//下面的为模糊查询，使其输入法输完才进行查询
			var flag = true;
			$("#searchName").on("compositionstart", function() {
				flag = false;
			})
			$("#searchName").on("compositionend", function() {
				flag = true;
			})
			document.getElementById("searchName").oninput = function() {
				setTimeout(function() {
					if (flag) {
						//页面的跳转，跳转到指定页面
						location.href = "ab?op=queryPage&nameLike="
								+ $("#searchName").val();
					}
				}, 0);
				//setCaretPosition($("#searchName"),$("#searchName").val().length);
				$("#searchName").focusEnd();
			}
		});

		//搜索光标自动移到最后一位
		$.fn.setCursorPosition = function(position) {
			if (this.lengh == 0)
				return this;
			return $(this).setSelection(position, position);
		}

		$.fn.setSelection = function(selectionStart, selectionEnd) {
			if (this.lengh == 0)
				return this;
			input = this[0];

			if (input.createTextRange) {
				var range = input.createTextRange();
				range.collapse(true);
				range.moveEnd('character', selectionEnd);
				range.moveStart('character', selectionStart);
				range.select();
			} else if (input.setSelectionRange) {
				input.focus();
				input.setSelectionRange(selectionStart, selectionEnd);
			}

			return this;
		}

		$.fn.focusEnd = function() {
			this.setCursorPosition(this.val().length);
		}
		$("#searchName").focusEnd();
	</script>
	<script type="text/javascript">
	//删除功能
		function delFunction(aid) {
		//layui插件
			layer
					.prompt(
							{
								title : '请输入删除口令，并确认',
								formType : 1
							},
							function(pass, index) {
								layer.close(index);
								if (pass == "admin") {
									layer.msg('删除成功');
									//页面跳转，跳转到servlet
									location.href = "${pageContext.request.contextPath}/ab?op=delete&aid="
											+ aid;
								} else {
									layer.msg('密码错误，删除失败');
								}

							});
		}
	    //增加功能
		$(".insert").click(function() {
			//使用layui插件
			var index = layer.open({
				  type: 2,
				  title:'增加操作',
				  anim: 3,
				  content: 'addAnswer.jsp',
				  area: ['500px', '1000px'],
				  maxmin: true
			});
			layer.full(index);
		});
	    //修改操作
		$(".update").click(function(){
			$("#aid").val($(this).parents("tr").find("td").eq(0).text());
			$("#qId").val($(this).parents("tr").find("td").eq(1).text());
			$("#content").val($(this).parents("tr").find("td").eq(2).text());
		});
	</script>
	<script type="text/javascript">
		$(function() {
			//ajax中的get请求
			$.get("UserServlet?op=queryUser", function(data, status) {
				//使用内置对象将返回值转成数组
				array = JSON.parse(data);
				//遍历集合
				$.each(array, function(index, user) {
					$("#userId").append(
							"<option value="+user.userId+">" + user.userName
									+ "</option>");
				});
			});
		});
		$(function() {
			//ajax中的get请求
			$.get("qs?op=queryQuestion", function(data, status) {
				//使用内置对象将返回值转成数组
				array = JSON.parse(data);
				//遍历集合
				$.each(array, function(index, question) {
					$("#qId").append(
							"<option value="+question.qId+">" + question.qTitle
									+ "</option>");
				});
			});
		});
	</script>
	<script>
	//使用layui插件进行分页功能的实现
	layui.use('laypage', function() {
		var laypage = layui.laypage;
		var c = ${pda.total};
		var l = ${pda.pageSize};
		var p = ${pda.page};
		console.log(c)
		//执行一个laypage实例
		laypage.render({
			elem : 'test1' //注意，这里的 test1 是 ID，不用加 # 号
			,
			count : c, //数据总数，从服务端得到
			limit : l,
			limits:[5,10, 20, 30, 40, 50],
			skip : '#5e7cdf',
			layout: ['count', 'prev', 'page', 'next', 'limit', 'refresh', 'skip'],
			curr : function() {
				var page = p; // 当前页(后台获取到的)
				return page ? page : 1; // 返回当前页码值
			}(),
			jump : function(obj, first) {
				if (!first) {
					location.href = "ab?op=queryPage&page=" + obj.curr+"&pageSize="+obj.limit
							+ "&nameLike=" + $("#searchName").val();
				}
			}
		});
	});
	</script>
	<script>
	    //使用layui插件使选择时间更美观
		layui.use('laydate', function() {
			var laydate = layui.laydate;

			//常规用法
			laydate.render({
			    elem: '#adate'
			    ,type: 'datetime'
			});
		});
	</script>
</body>

</html>